var education = {
  page: 1,
  number: 10,
  total: 0,
  totalPage: 0,
  init: function (option) {
    for (var attr in option) {
      this[attr] = option[attr]
    }
    if (!this.typeId) return
    this.renderBgAndTilte()
    this.getData()
    this.render()
  },
  renderBgAndTilte: function () {
    var data = getTypeDetailInfo(this.typeId)[0]
    page.data.detail = data
    var pictures = data.typePicture[0]
    if (pictures.picPath3) {
      $('#main').css('background-image', 'url(' + pictures.picPath3 + ')')
    }
    if (pictures.picPath10) {
      $('#title').html('<img src="' + pictures.picPath10 + '" />')
    } else if (this.typeName) {
      $('#title').html(this.typeName)
    }
  },
  getData: function () {
    var data = getVodListByTypeId({TYPEID: this.typeId, LENGTH: 1000})
    page.data.list = data.data
    this.total = page.data.list.length
  },
  render: function () {
    this.renderPage()
    var html = ''
    var data = page.data.list
    var len = data.length
    var max = this.page < this.totalPage ? 10 : len % 10
    var bg = ''
    if (page.data.detail 
        && page.data.detail.typePicture 
        && page.data.detail.typePicture[0] 
        && page.data.detail.typePicture[0].picPath11) {
      bg = page.data.detail.typePicture[0].picPath11
    }
    // var bg = page.data.detail.typePicture
    for (var i = 0; i < max; i++) {
      var _page = this.page - 1
      var sitcom = data[(_page * this.number) + i]
      var pics = sitcom.picture[0]
      
      var style = ''
      if (i < 5) {
        style += 'top: 0;'
      } else {
        style += 'top: 310px;'
      }
      style += 'left:' + (i % 5) * 242 + 'px;'
      if (bg) {
        style += 'background: url(' + bg + ') no-repeat;'
      }
      html += '<div id="list-' + i + '" class="item" style="' + style + '">'
      html += '<div class="img-container">'
      if (page.isSub != 0 && sitcom.charge != 0 ) {
        html += '<img style="position:absolute;width: 100%; height: 100%; left: 0; top: 0; z-index: 10;" src="./images/lock.png"/>'
      }
      html += '<img src="' + pics.picPath3 + '"/>'
      html += '</div>'
      html += '<div class="title-container">'
      html += '<img src="' + pics.picPath10 + '"/>'
      html += '</div>'
      html += '</div>'
    }
    $('#list').html(html)
  },
  renderPage: function(){
    this.totalPage = Math.ceil(this.total / this.number)
    $('#page').html('第<span class="color">' + this.page + '</span>页 / 共<span class="color">' + this.totalPage + '</span>页')
  },
}